<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
	<title>点击生成10个div</title>
	<style type="text/css">
		* {
			margin:0;
			padding:0;
		}
	    div {
			height:50px;
			width:50px;
			position:absolute;
			color:white;
			background:#66ff66;
			line-height:50px;
			text-align:center;
		}
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var i;
		var oBtn = document.getElementById('button1');
		var oDiv = document.getElementsByTagName('div');
		oBtn.onclick = function(){
			for ( i = 0; i < 10; i++) {
				document.body.innerHTML += '<div>' + i + '</div>';
				oDiv[i].style.marginLeft = i * 60 + 'px';
				oDiv[i].style.background = '#' + i * 102134 ;
			}
		};
	};

	</script>
</head>
<body>
	<input id="button1" type="button" value="生成div" />
</body>
</html>